<template>
  <div class="wrap">

    <transfer-info-view
      :distribution-goods-list="distributionGoodsList"
      :straight-goods="straightGoods"
      :data="data"
        :GoodsList="GoodsList"
    ></transfer-info-view>

    <div class="mgt20">
      <el-button @click="jumpPage('transferList')">{{$t('common.back')}}</el-button>
      <el-button type="primary" @click="checkGoodsNum" v-if="data.status === 1 && (!data.labelOrder || data.labelOrder.status === 2)" :loading="btnLoading">{{$t('transfer.确认调货')}}</el-button>
      <transfer-thermal :id="data.id"></transfer-thermal>
    </div>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {jumpLabelOrderInfo, jumpPage} from "@/utils/jumpView";

import {finishTransfer, getTransferInfo, saveTransferGoodsNum,} from "@/api/transferWork";
import TransferInfoView from "@/views/transferWork/components/TransferInfoView.vue";
import TransferThermal from "@/views/transferWork/components/TransferThermal.vue";

export default {
  name: "middleInfo",
  components: {TransferThermal, TransferInfoView},
  computed:{

  },
  data(){
    return {
      id: 0,
      loading: false,
      data: {},
      straightGoods: [], // 无需调货的商品
      distributionGoodsList: [], // 需要调货的商品
      originDistribution: [], // 原来的数据 用于记录是否有改变数据
      apiOtherGoodsList: [], // 接口返回的数据
      GoodsList:[],
      dialog: false,
      dialogGoods: {
        otherGoods: [],
      },
      btnLoading: false,
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getData()
  },
  methods:{
    jumpLabelOrderInfo,jumpPage,
    getData(){
      this.loading = true
      getTransferInfo(this.id)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.straightGoods =  res.data.straightGoods
          this.GoodsList =  res.data.GoodsList
          this.distributionGoodsList = res.data.distributionGoods
          this.originDistribution = deepCopy(this.distributionGoodsList)

          this.straightGoods.forEach(item=>{
            item.rlGoodsNum = this.data.status < 2 && !item.save ? item.exGoodsNum : item.rlGoodsNum
          })
        })
    },
    // 修改库存
    showDialog(row){
      this.dialog = true
      this.dialogGoods = row
    },
    // 修改库存
    chooseDistribution(row){
      this.distributionDialog = true
      this.distributionGoods = row
    },
    checkGoodsNum(){
      const flag = this.straightGoods.some(item=>{
        if(!item.rlGoodsNum){
          item.rlGoodsNum = 0;
        }
        return item.rlGoodsNum !== item.exGoodsNum
      })
      if(flag){
        this.$warning(this.$t('transfer.实际调货数量与预计调货数量存在差异，请先与用户沟通确认'),{
          'title': this.$t('transfer.确认调货？'),
        })
          .then(()=>{
            this.finishTransfer()
          })
          .catch(()=>{

          })
      }else{
        this.finishTransfer()
      }
    },
    finishTransfer(){
      const data = {
        id: this.data.id,
        goodsData: [],
      }
      this.straightGoods.forEach(item=>{
        const obj = {
          id: item.id,
          rlGoodsNum: item.rlGoodsNum ? item.rlGoodsNum : 0
        }
        data.goodsData.push(obj)
      })

      this.btnLoading = true
      finishTransfer(data)
        .then(res=>{
          this.btnLoading = false
          if(res.error === 0){
            this.$successMessage(res.message)
            this.getData()
          }else{
            this.$errorMessage(res.message)
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}
.goods-table{
  width: 1500px;
  .goods-title{
    font-size: 14px;
  }
  .goods-attr{
    font-size: 13px;
    color: #7F7F7F;
  }
}
.table-tips{

}

.header-card{
  position: relative;
  .button{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 20px;
    top: 30px;
  }
}
.box-content{
  font-size: 15px;
}
</style>
